<template>
  <div>
    <h1>App</h1>
    <div @click="fatherFn" class="test">
      <!-- 事件修饰符
        prevent - 阻止默认行为
        stop - 阻止冒泡

        他们可以连着写 顺序无所谓
        @click.prevent.stop
       -->
      <a @click.prevent.stop="sonFn" href="https://www.taobao.com" target="_blank">修饰符阻止默认跳转</a>
      <a @click.stop.prevent="sonFn" href="https://www.taobao.com" target="_blank">修饰符阻止默认跳转 - 换顺序版</a>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn () {
      console.log('father');
    },
    sonFn () {
      console.log('sonFn');
    }
  }
}
</script>

<style>
.test {
  width: 200px;
  height: 200px;
  background-color: pink;
}
</style>